<template>
	<view class="page">
		<view style="height:30upx"></view>
		<view class="select-bit" @click="showPop">
			<view class="value">{{currentCoin.coin_name}}</view>
			<view class="icon">
				<text class="placeholder">{{i18n.selectCurrency}}</text>
				<text class="iconfont">&#xe600;</text>
			</view>
		</view>
		<view class="input-container" :class="{focus: focus.input2}">
			<input type="number" v-model="uid" class="input" @focus="focus.input2=true" @blur="focus.input2=false" :placeholder="i18n.enterUid">
		</view>
		<view class="input-container" :class="{focus: focus.input1}">
			<input type="number" v-model="num" class="input" @focus="focus.input1=true" @blur="focus.input1=false" :placeholder="i18n.enterNum" >
			<view class="input-right">
				<view>{{currentCoin.coin_name}}</view>
				<view style="margin: 0 20upx">|</view>
				<view  @click="num=currentCoin.money">{{i18n.all}}</view>
			</view>
		</view>
		<view class="input-tip-text">
			<view class="input-tip-left">
				<text class="text-gray">{{i18n.fee}}: </text>
				<text>{{currentCoin.transfer_fee * 100}}%</text>
			</view>
			<view class="input-tip-sub">
				<text class="text-gray">{{i18n.balance}}: </text>
				<text>{{currentCoin.money}} {{currentCoin.coin_name}}</text>
			</view>
		</view>
		<!-- <view class="input-des">可用<text style="color: #263238; margin-left: 10upx;">{{current.money}} {{current.coin}}</text></view> -->
		
		<view class="submit">
			<button class="btn-block" hover-class="btn-hover" style="margin-top: 20upx;" @click="showAuth">{{i18n.transfer}}</button>
		</view>
		<u-popup v-model="selectCurrencyModalRef" mode="bottom" border-radius="10">
			<view class="modal-body">
				<scroll-view class="scroll-list" scroll-y="true">
					<view class="item" v-for="(item, index) in coinList" :key="index" @click="selectCoin(item)">
						<view class="list-left">
							<image :src="item.image" class="btc-icon"></image>
							<view class="list-center">
								<view class="name">{{ item.coin_name }}</view>
								<view class="money">{{i18n.balance}}：{{ item.money }}</view>
							</view>
						</view>
						<text class="iconfont select-icon">&#xe600;</text>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<safetyVerification ref="safetyVerificationRef" :userInfo="userInfo" requestUrl="api/sms/common" @affirm="submit" type="withdraw"/>
	</view>
</template>

<script>
	import safetyVerification from '@/components/safetyVerification2.vue'
	export default {
		components: {safetyVerification},
		data(){
			return {
				coinList: [],
				num: '',
				uid: '',
				focus: {
					input1: false,
					input2: false
				},
				currentCoin: {coin: 'BTC', money: '0'},
				userInfo: {},
				selectCurrencyModalRef:false
			}
		},
		created (){
			this.fetchCoin()
		},
		onShow() {
			this.fetchUserInfo()
			uni.setNavigationBarTitle({
			 title: this.$t('transfer.transfer')
			})
		},
		computed:{
			i18n() {
				return this.$t('transfer');
			}
		},
		methods: {
			showAuth(){
				let { num, uid } = this 
				if(!uid){
					this.$toast(this.$t('transfer.pleaseUid'))
				}else if(!num){
					this.$toast(this.$t('transfer.pleaseNum'))
				}else{
					this.$refs.safetyVerificationRef.show()
				}
			},	
			showPop (){
				this.selectCurrencyModalRef = true
			},
			selectCoin(item) {
				this.currentCoin = item
				this.selectCurrencyModalRef = false
			},
			//获取互转币种
			fetchCoin() {
				this.$post('api/funds/account').then(res=>{
					if(res.code === 200){	
						for(let i=0;i<res.data.coins.length;i++){
							if(res.data.coins[i].is_transfer){
								this.coinList.push(res.data.coins[i])
								this.currentCoin = res.data.coins[i]
								this.selectCoin(res.data.coins[i])
								break
							}
						}
					}
				})
			},
			//密码输入完
			submit (codes){
				let num = this.num
				let to_uid = this.uid
				let coin_id = this.currentCoin.id
				let data = { num, to_uid, coin_id }
				if(codes.mobile_code){
					data.mobile_code = codes.mobile_code
				}
				if(codes.email_code){
					data.email_code = codes.email_code
				}
				if(codes.ga_code){
					data.ga_code = codes.ga_code
				}
				this.$post('api/funds/transfer', data).then(res=>{
					setTimeout(()=>{
						uni.navigateBack({ delta: 1 })
					}, 1200)
					this.$toast(res.msg)
				})
				this.safetyVerificationRef = false
			},
			fetchUserInfo() {
				this.userInfo = this.$getStore('ucenterInfo', true)
				this.$post('api/ucenter/info')
					.then(res => {
						let userInfo = res.data
						this.userInfo = userInfo
						this.$setStore('ucenterInfo', userInfo ,true)
					})
			},
		}
	}
</script>

<style lang="less" scoped>
	.input-tip-text{
		display: flex;justify-content: space-between;font-size: 24upx;margin-top: 10upx;
	}
	.input-tip-left{
		flex: 1;
	}
	.text-gray{
		color: var(--txt-gray-color);
		margin-right: 10upx;
	}
	.submit {
		margin-top: 40upx;
		.getToNum {
			display: flex;
			justify-content: space-between;
			color: var(--txt-color);
			font-size: 28upx;
		}
	}
	.input-des {
		font-size: 28upx;
		color: var(--txt-color);
		font-weight: 500;
		display: flex;
		margin-top: 30upx;
	}
	.input-container {
		border-bottom: 1upx solid var(--border);
		display: flex;
		align-items: center;
		height: 100upx;
		transition: border-bottom-color ease .3s;
		margin-top: 30upx;
		&.input-focus{
			border-bottom-color: var(--theme-color);
		}
		.input {
			flex: 1;
			font-size: 28upx;
		}
		input {
			flex:1;
		}
		.input-right {
			display: flex;
			align-items: center;
			color: var(--theme-color);
			font-size: 28upx;
			font-weight: bold;
		}
	}
	.select-bit {
			height: 100upx;
			border: 1upx solid var(--border);
			border-radius: 10upx;
			display: flex;
			align-items: center;
			padding: 0 30upx;
			justify-content: space-between;
	
			.value {
				font-size: 30upx;
				font-weight: bold;
			}
	
			.icon {
				display: flex;
				align-items: center;
				color: var(--txt-color);
				font-size: 26upx;
			}
	
			.placeholder {
				margin-right: 20upx;
			}
		}
	.page {
		padding: 0 30upx;
	}
	.scroll-list {
			height: 600upx;
	
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 30upx;
				margin-right: 30upx;
				border-bottom: 1upx solid var(--border);
				height: 120upx;
	
				.select-icon {
					font-size: 24upx;
				}
	
				.list-left {
					display: flex;
					align-items: center;
				}
	
				.list-center {
					margin-left: 30upx;
	
					.name {
						font-size: 28upx;
						font-weight: 400;
					}
					.money {
						font-size: 24upx;
						font-weight: 400;
					}
				}
			}
	}
	.modal-body {

	}
	.btc-icon {
		width: 60upx;
		height: 60upx;
	}
	
</style>
